<template>
	<view class="container">
		<cu-custom bgColor="bg-menu" :isBack="true">
			<block v-slot:backText>返回</block>
			<block v-slot:content>会员邀请码</block>
		</cu-custom>
		<view class="bg bg-menu"></view>
		<view class="main">
			<view class="userinfo">
				<image class="avatar" :src="info.avatarUrl"></image>
				<view class="username">{{info.nickname}}</view>
				<view class="desc">微信扫一扫，立即享受社区福利</view>
			</view>
			<view class="code-section">
				<!-- qrcode begin -->
				<image v-if="recodeUrl.length>0" :src="recodeUrl" style="width: 600rpx; height: 650rpx;"></image>
				<canvas v-else canvas-id="memberCode" style="width: 600rpx; height: 600rpx;"></canvas>
				<!-- qrcode end -->
				<view class="tips">会员邀请更多实惠</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { accountInfo } from '@/common/api/user';
	import uQRCode from '@/common/uqrcode'
	import { wechatQrcode } from '@/common/api/user';
	import cuCustom from '@/components/header/cu-custom.vue';
	import { onShow } from '@dcloudio/uni-app';
	const info = ref({
		"id" : "21961706390000181",
    "username" : "18716643045",
    "realName" : null,
    "nickname" : "",
    "avatarUrl" : "",
    "phone" : "18716643045",
    "address" : null,
    "email" : null,
    "birthday" : null,
    "gender" : 1,
    "roleKeys" : [ ],
    "msgNum" : "0",
    "surplus" : null});
	const back = () => {
		uni.navigateBack()
	}
	const makeMemberCode = () => {
		uQRCode.make({
			canvasId: 'memberCode',
			componentInstance: this,
			text: `code=${info.value.id}`,
			size: uni.upx2px(600),
			margin: 20,
			backgroundColor: '#ffffff',
			foregroundColor: '#000000',
			fileType: 'jpg',
			correctLevel: uQRCode.defaults.correctLevel,
			success: res => {
			}
		})
	}
	const onUser = async () => {
		const res: any = await accountInfo('');
		if (res.code == 1000) {
			info.value = res.data;
			//makeMemberCode()
			handleCreateCode()
		}
	};
	const recodeUrl = ref('')
	const handleCreateCode = async () => {
		const res : any = await wechatQrcode({ path: '/pages/index/index?inviteUserId=' + info.value.id });
		if (res.code == 1000) {
			recodeUrl.value = res.data
		} else {
			//form.value = [];
		}
	
	};
	onShow(() => {
		onUser()

		setInterval(() => {

			onUser()
		}, 30000)
	})
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
	}

	.bg {
		height: 15vh;
		/* #ifdef H5 */
		height: calc(15vh - 44px);
		/* #endif */
	}

	.main {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
		border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.6);

		.avatar {
			position: relative;
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
			margin-top: -70rpx;
			margin-bottom: 20rpx;
		}

		.username {
			font-size: $font-size-extra-lg;
			font-weight: bold;
			margin-bottom: 50rpx;
		}

		.desc {
			font-size: $font-size-sm;
			color: $text-color-assist;
			margin-bottom: 20rpx;
		}
	}

	.code-section {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: $font-size-base;
		color: $font-size-base;

		.tips {
			font-size: $font-size-sm;
			color: $text-color-assist;
		}
	}
</style>